<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Aze Serial Port Tool</title>
    <script type='text/javascript' src='plugin/vue.js'></script>
    <style type='text/css'>
        body{
            background: #fff;
        }        
        textarea{
            resize: none;
            width: 100%;
            height: 300px;
            overflow: auto;
            word-break: break-all;
        }
        input{
            width: 50px;
        }
        .green{
            color: green;
        }     
        #register{ 
            height: 370px; 
            background: #eee;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: flex-start;
            padding: 5px;
            margin: 3px;
            font-family: monospace;
            overflow: auto;
        }
        button{
            margin: 3px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div>
            <p v-for='k in Object.keys(option)'>{{k}}:
                <select v-model='config[k]' :disabled='bConnect'>
                    <option v-for='x in option[k]' :value='x'>{{x}}</option>
                </select>
            </p>

            <button @click='connect' :class='{green: bConnect}'>
                {{bConnect ? 'connected' : 'disconnect'}}
            </button>
            <button @click='bToolModbus=!bToolModbus' :class='{green: bToolModbus}'>Modbus</button>
            <button @click='bToolSerial=!bToolSerial' :class='{green: bToolSerial}'>Serial</button>
            <button @click='bToolSimulator=!bToolSimulator' :class='{green: bToolSimulator}'>Simulator</button>
            <button @click='bToolChart=!bToolChart' :class='{green: bToolChart}'>Chart</button>
            <button @click='bToolDatapool=!bToolDatapool' :class='{green: bToolDatapool}'>Datapool</button>
        </div>
        <hr>
        <div v-if='bToolModbus'>
            <p>Device ID: <input type='number' v-model='iDevId' :disabled='bReading'></p>
            <p>Register Origin: <input type='number' v-model='iRegOrigin' :disabled='bReading'></p>
            <p>Register Length: <input type='number' v-model='iRegLength' :disabled='bReading'></p>
            <p>Send Frame Count: <u>{{iSendCount}}</u></p>
            <p>Recieve Frame Count: <u>{{iRecieveCount}}</u></p>
            <p><button @click='resetCount'>Reset Count</button>
            <button @click='readFrame'  :disabled='bSending' :class='{green: bReading}'>
                {{bReading ? 'Reading...' : 'Read'}}
            </button></p>
            <hr>
            <button @click='bHex=!bHex'>{{bHex ? 'Hex' : 'Dec'}}</button>         
            <div id='register'>
                <span v-for='x in aModBusOrder' style='width:230px; margin: 2px'>{{x}}</span>
            </div>
            <hr>
        </div>
        <div v-if='bToolSerial'>
            <p>Frame Request: 
            <input type='text' v-model='tFrameRequest' style='width:260px'>
            <input type='checkbox' v-model='bCRC'>CRC</p>
            <p>Frame Interval (ms): 
            <input type='number' v-model='iFrameInterval' :disabled='bSending'>
            <input type='checkbox' v-model='bKeep'>Keep</p>
            <button @click='sendFrame' :disabled='bReading' :class='{green: bSending}'>{{bSending ? 'Sending...' : 'Send'}}</button>     
            <hr> 
            Frame Monitor: 
            <button @click='tFrameMonitor=""' style='float: right;'>Clear</button>
            <br/><textarea id='receive' disabled>{{tFrameMonitor}}</textarea>
        </div>  
    </div>
</body>
<script src='./renderer.js'></script>
</html>